<template>
    <div>
        <el-radio-group v-model="margin.mode">
            <el-radio label="default">默认</el-radio>
            <el-radio label="custom">自定义</el-radio>
        </el-radio-group>
        <div class="form-item-ext" v-show="margin.mode == 'custom'">
            <div class="form-item-ext-row">
                <label>上:</label>
                <el-input v-model="margin.top" style="width:75px">
                    <template slot="append">px</template>
                </el-input>
                <label>下:</label>
                <el-input v-model="margin.bottom" style="width:75px">
                    <template slot="append">px</template>
                </el-input>
            </div>
            <div class="form-item-ext-row">
                <label>左:</label>
                <el-input v-model="margin.left" style="width:75px">
                    <template slot="append">px</template>
                </el-input>
                <label>右:</label>
                <el-input v-model="margin.right" style="width:75px">
                    <template slot="append">px</template>
                </el-input>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        props: [ 'label', 'mclass', 'collapsed' ],
        data () {
            return {
                collapse: false,
                margin: {
                    mode: 'custom'
                }
            }
        },
        mounted () {
            this.collapse = this.collapsed;
        },
        components: {
        },
        watch: {
            'margin.mode'(val) {
                if(val === 'custom') {
                    this.collapse = false;
                }
            }
        },
        methods: {
            collapseChange() {
                this.collapse = !this.collapse;
            }
        }
    }
</script>
